<template>
  <div>
    <el-table
            :data="data.body"
            v-bind="$props.native"
            :cell-class-name="calcStyle"
    >
      <el-table-column
              v-if="prefix"
              label=""
              width="20">
        <template slot-scope="scope">
          <slot name="prefix" :scope="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
              type="index"
              width="50">
      </el-table-column>
      <el-table-column
              v-for="item in data.header"
              :width="item.width"
              :key="item.key"
              :label="item.label"
              :formatter="item.formatter"
              :prop="item.key">
      </el-table-column>
      <el-table-column
              v-if="operation"
              label="操作">
        <template slot-scope="scope">
          <slot name="expand" :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="operation" v-if="pagination">
      <b></b>
      <el-pagination
              @current-change="change"
              :current-page="data.footer.currentPage"
              layout="total, prev, pager, next"
              :page-size="10"
              :total="data.footer.total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Emit } from 'vue-property-decorator'

  @Component({})
  export default class PlainTable extends Vue {

    @Prop({
      default: () => {}
    }) data: TableData
    @Prop({
      default: () => {}
    }) native
    @Prop({
      default: true
    }) operation: boolean
    @Prop({
      default: true
    }) pagination: boolean
    @Prop({
      default: false
    }) prefix: boolean

    @Emit()
    change (currentPage) {
    }

    calcStyle ({ row, column }) {
      if (column.label === '票据状态') {
        return 'red'
      }
    }
  }
</script>

<style lang="less" scoped>
  .operation {
    display: flex;
    justify-content: space-between;
  }

</style>
<style lang="less">
  .red {
    color: red;
    font-weight: 600;
  }
</style>
